<template>
	<div class="">
		<div class="live-container">
			<div class="live-wrapper">
				<ul class="main-banner">
					<li class="highlight-via_casino" @mouseover="getMouseover(1)" @mouseout="getMouseout(1)">
						<div class="item-cover"
							:style="{backgroundImage: 'url(' + require('../../assets/img/hl-via_casino.jpg') + ')' }">
						</div>
						<div class="item-gplogo" :style="{backgroundImage: `url(${bgImageVia})` }">
						</div>
					</li>
					<li class="highlight-sexybcrt" @mouseover="getMouseover(2)" @mouseout="getMouseout(2)">
						<div class="item-cover"
							:style="{backgroundImage: 'url(' + require('../../assets/img/hl-sexybcrt.jpg') + ')' }">
						</div>
						<div class="item-gplogo" :style="{backgroundImage:`url(${bgImageSex})`}">

						</div>
					</li>
					<li class="highlight-dg" @mouseover="getMouseover(3)" @mouseout="getMouseout(3)">
						<div class="item-cover"
							:style="{backgroundImage: 'url(' + require('../../assets/img/hl-dg.jpg') + ')' }">
						</div>
						<div class="item-gplogo" :style="{backgroundImage:`url(${bgImageDg})`  }">
						</div>
					</li>
					<li class="highlight-evo" @mouseover="getMouseover(4)" @mouseout="getMouseout(4)">
						<div class="item-cover"
							:style="{backgroundImage: 'url(' + require('../../assets/img/hl-evo.jpg') + ')' }">
						</div>
						<div class="item-gplogo" :style="{backgroundImage:`url(${bgImageEvo})`}">
						</div>
					</li>
					<li class="highlight-ezugi" @mouseover="getMouseover(5)" @mouseout="getMouseout(5)">
						<div class="item-cover"
							:style="{backgroundImage: 'url(' + require('../../assets/img/hl-ezugi.jpg') + ')' }">
						</div>
						<div class="item-gplogo" :style="{backgroundImage: `url(${bgImageEzugi})`}">
						</div>
					</li>
					<li class="highlight-motivation" @mouseover="getMouseover(6)" @mouseout="getMouseout(6)">
						<div class="item-cover"
							:style="{backgroundImage: 'url(' + require('../../assets/img/hl-motivation.jpg') + ')' }">
						</div>
						<div class="item-gplogo" :style="{backgroundImage: `url(${bgImageMotiva})`}">
						</div>
					</li>
					<li class="highlight-onlive" @mouseover="getMouseover(7)" @mouseout="getMouseout(7)">
						<div class="item-cover"
							:style="{backgroundImage: 'url(' + require('../../assets/img/hl-motivation.jpg') + ')' }">
						</div>
						<div class="item-gplogo" :style="{backgroundImage: `url(${bgImageOnlive})` }">
						</div>
					</li>
					<li class="highlight-pp" @mouseover="getMouseover(8)" @mouseout="getMouseout(8)">
						<div class="item-cover"
							:style="{backgroundImage: 'url(' + require('../../assets/img/hl-pp.jpg') + ')' }">
						</div>
						<div class="item-gplogo" :style="{backgroundImage: `url(${bgImagePp})`}">
						</div>
					</li>
					<li class="highlight-wm highlight" @mouseover="getMouseover(9)" @mouseout="getMouseout(9)">
						<div class="item-cover"
							:style="{backgroundImage: 'url(' + require('../../assets/img/hl-wm.jpg') + ')' }">
						</div>
						<div class="item-gplogo" :style="{backgroundImage: `url(${bgImageWm})`}">
						</div>
					</li>
				</ul>
				<div class="live-main">
					<div class="live-main-wrap">
						<div class="game-item" data-subprovider="EVO真人" @click="getGame('E0')">
							<img src="../../assets/img/VIA_CASINO.webp" alt="">
							<button title="" class="nrc-button btn-main"
								type="button">{{$t('indexTitle.title22')}}</button>
						</div>
						<div class="game-item" data-subprovider="BBIN真人" @click="getGame('GB')">
							<img src="../../assets/img/Sexybcrtaa.webp" alt="Sexybcrt">
							<button title="" class="nrc-button btn-main"
								type="button">{{$t('indexTitle.title22')}}</button>
						</div>
						<div class="game-item" data-subprovider="SEXY真人" @click="getGame('S6')">
							<img src="../../assets/img/Dreamgamingaa.webp" alt="Dream Gaming">
							<button title="" class="nrc-button btn-main"
								type="button">{{$t('indexTitle.title22')}}</button>
						</div>
						<div class="game-item" data-subprovider="WE真人" @click="getGame('WE')">
							<img src="../../assets/img/Evolutionaa.webp" alt="Evolution">
							<button title="" class="nrc-button btn-main"
								type="button">{{$t('indexTitle.title22')}}</button>
						</div>
						<div class="game-item" data-subprovider="WM真人" @click="getGame('WC')">
							<img src="../../assets/img/EZUGIaa.webp" alt="EZUGI">
							<button title="" class="nrc-button btn-main"
								type="button">{{$t('indexTitle.title22')}}</button>
						</div>
						<div class="game-item" data-subprovider="DG真人" @click="getGame('DG')">
							<img src="../../assets/img/MOTIVATIONaa.webp" alt="MOTIVATION">
							<button title="" class="nrc-button btn-main"
								type="button">{{$t('indexTitle.title22')}}</button>
						</div>
						<!-- <div class="game-item" data-subprovider="ONLIVE">
							<img src="../../assets/img/ONLIVEaa.webp" alt="ONLIVE">
							<button title="" class="nrc-button btn-main"
								type="button">{{$t('indexTitle.title22')}}</button>
						</div>
						<div class="game-item" data-subprovider="PP">
							<img src="../../assets/img/PragmaticPlayaa.webp" alt="Pragmatic Play">
							<button title="" class="nrc-button btn-main"
								type="button">{{$t('indexTitle.title22')}}</button>
						</div>
						<div class="game-item" data-subprovider="WM">
							<img src="../../assets/img/WMCasinoaa.webp" alt="WM Casino">
							<button title="" class="nrc-button btn-main"
								type="button">{{$t('indexTitle.title22')}}</button>
						</div> -->
					</div>
				</div>
			</div>
		</div>
		<loading v-if="isLoadingShow"></loading>
		<loadingFour :msgText="msgTextTow" v-if="isShowLoadingTeow" @closeGuanbiTow="closeGuanbi"></loadingFour>
	</div>
</template>
<script>
	import {
		playGame
	} from "../../utils/api.js"
	import loading from '../../components/loading.vue'
	import loadingFour from '../../components/loadingFour.vue';
	export default {
		data() {
			return {
				bgImageVia: require('../../assets/img/via_casinoss.webp'),
				bgImageSex: require('../../assets/img/sexybcrtss.webp'),
				bgImageDg: require('../../assets/img/dgss.webp'),
				bgImageEvo: require('../../assets/img/evoss.webp'),
				bgImageEzugi: require('../../assets/img/ezugiss.webp'),
				bgImageMotiva: require('../../assets/img/motivationdd.webp'),
				bgImageOnlive: require('../../assets/img/onlivess.webp'),
				bgImagePp: require('../../assets/img/ppss.webp'),
				bgImageWm: require('../../assets/img/wmss.webp'),
				isLoadingShow: false,
				msgTextTow: "",
				isShowLoadingTeow: false
			}
		},
		components: {
			loading,
			loadingFour
		},
		created() {},
		mounted() {
			// if(localStorage.getItem('show')==1){
			// 	this.isLoadingShow = true
			// 	// window.location.href.indexOf("?show") > -1 ? this.isLoadingShow = true : ''
			// }
			window.location.href.indexOf("?show") > -1 ? this.isLoadingShow = true : ''
		},
		methods: {
			closeGuanbi(e) {
				this.isShowLoadingTeow = false;
			},
			getMouseover(num) {
				console.log(num);
				if (num == 1) {
					this.bgImageVia = require('../../assets/img/via_casinoaa.webp')
				} else if (num == 2) {
					this.bgImageSex = require('../../assets/img/Sexybcrtaa.webp')
				} else if (num == 3) {
					this.bgImageDg = require('../../assets/img/Dreamgamingaa.webp')
				} else if (num == 4) {
					this.bgImageEvo = require('../../assets/img/Evolutionaa.webp')
				} else if (num == 5) {
					this.bgImageEzugi = require('../../assets/img/EZUGIaa.webp')
				} else if (num == 6) {
					this.bgImageMotiva = require('../../assets/img/MOTIVATIONaa.webp')
				} else if (num == 7) {
					this.bgImageOnlive = require('../../assets/img/ONLIVEaa.webp')
				} else if (num == 8) {
					this.bgImagePp = require('../../assets/img/ppdd.webp')
				} else if (num == 9) {
					this.bgImageWm = require('../../assets/img/WMCasinoaa.webp')
				}
			},
			getGame(type) {
				if (!localStorage.getItem('token')) {
					this.$emit('getShowLogin', true)
					return false;
				}
				this.isLoadingShow = true;
				// window.open('http://43.198.233.28/game/playGame?api_code=' + type + '&game_type=LC&token=' + localStorage.getItem('token') + '&game_id=', '_blank')
				let data = {
					api_code: type,
					game_type: 'LC',
					token: localStorage.getItem('token'),
					game_id: '',
				}
				let url = "";
				var wyWindow = "";
				setTimeout(() => {
					wyWindow = window.open(location.href + '?show=1', "_blank");
					// wyWindow = window.open(location.href, "_blank");
				}, 100);
				// localStorage.setItem('show',1)
				playGame(data).then((res) => {
					if (res.status.errorCode == 0) {
						console.log(res.data);
						// this.isLoadingShow = false;
						if (res.url) {
							url = res.url;
							wyWindow.location = url;
							// window.open('https://www.aies.cn/', '_blank')
							// window.open(res.url, '_blank')
						}
					} else if (res.status.errorCode == 401) {
						this.$emit('getTokenNum', false)
						console.log(401);
					} else {
						// this.$message.error(res.status.msg);
						this.msgTextTow = res.status.msg;
						this.isShowLoadingTeow = true;
						setTimeout(() => {
							this.isShowLoadingTeow = false;
						}, 2000)
						// this.$message({
						// 	showClose: true,
						// 	message: res.status.msg,
						// 	type: 'error'
						// });
					}
					// localStorage.removeItem('show')
					this.isLoadingShow = false;
				}).catch((err) => {
					console.log(err, 'err')
				});
			},
			getMouseout(num) {
				if (num == 1) {
					this.bgImageVia = require('../../assets/img/via_casinoss.webp')
				} else if (num == 2) {
					this.bgImageSex = require('../../assets/img/sexybcrtss.webp')
				} else if (num == 3) {
					this.bgImageDg = require('../../assets/img/dgss.webp')
				} else if (num == 4) {
					this.bgImageEvo = require('../../assets/img/evoss.webp')
				} else if (num == 5) {
					this.bgImageEzugi = require('../../assets/img/ezugiss.webp')
				} else if (num == 6) {
					this.bgImageMotiva = require('../../assets/img/motivationdd.webp')
				} else if (num == 7) {
					this.bgImageOnlive = require('../../assets/img/onlivess.webp')
				} else if (num == 8) {
					this.bgImagePp = require('../../assets/img/ppss.webp')
				} else if (num == 9) {
					this.bgImageWm = require('../../assets/img/wmss.webp')
				}
			},
		}
	}
</script>



<style scoped>
	* {
		box-sizing: border-box;
	}

	.live-container {
		background: url('../../assets/img/pbg-live.jpg') no-repeat 50% 0 / 100% auto;
		height: 0;
		padding-bottom: 56%;
		position: relative;
	}

	.live-wrapper {
		background-color: #222;
		box-shadow: 0 2px 6px rgba(0, 0, 0, .75), 0 4px 10px rgba(0, 0, 0, .75), 0 6px 15px rgba(0, 0, 0, .75), 0 -4px 8px rgba(255, 255, 255, .15);
		left: 50%;
		max-width: 1920px;
		overflow: hidden;
		position: absolute;
		top: 50%;
		transform: translate3d(-50%, -50%, 0);
		width: 88%;
	}

	.live-wrapper>.main-banner {
		background-color: #000;
		display: flex;
	}

	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.live-wrapper>.main-banner>li {
		cursor: pointer;
		flex: 1 1 0;
		height: 460px;
		perspective: 400px;
		position: relative;
		transition: .6s;
	}

	.live-wrapper>.main-banner>li:hover {
		flex: 0 0 533px;
	}

	.live-wrapper>.main-banner>li .item-cover {
		background-position: 50%;
		background-size: cover;
		height: 100%;
		left: 0;
		opacity: .3;
		top: 0;
		width: 100%;
	}

	.live-wrapper>.main-banner>li:hover .item-cover {
		opacity: 1;
	}

	.live-wrapper>.main-banner>li .item-gplogo {
		background-position: 50%;
		background-repeat: no-repeat;
		background-size: contain;
		bottom: 50%;
		height: 60px;
		left: 50%;
		transform: translate3d(-50%, 50%, 0);
		width: 60px;
	}

	.live-wrapper>.main-banner>li:hover .item-gplogo {
		bottom: 10px;
		filter: drop-shadow(-1px -1px 0 rgba(255, 255, 255, .7)) drop-shadow(0 1px 3px rgba(0, 0, 0, .8)) drop-shadow(0 2px 6px rgba(0, 0, 0, .8));
		height: 160px;
		left: 10px;
		transform: translateZ(0);
		width: 160px;
	}

	.live-wrapper>.main-banner>li .item-cover,
	.live-wrapper>.main-banner>li .item-gplogo {
		position: absolute;
		transition: .6s;
	}

	.live-wrapper .live-main-wrap {
		display: flex;
		overflow: auto;
	}

	.live-main-wrap>.game-item {
		align-items: center;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		flex-shrink: 0;
		height: 170px;
		justify-content: space-between;
		padding: 25px 0;
		perspective: 250px;
		position: relative;
		width: 170px;
	}

	.live-main-wrap>.game-item>img {
		height: 72px;
		max-width: 112px;
		transition: transform .6s;
	}

	.nrc-button {
		background-color: #5235ff;
		border: 0;
		border-radius: 22.5px;
		color: #fff;
		cursor: pointer;
		font-size: 16px;
		height: 45px;
		padding: 0 40px;
	}

	.live-main-wrap>.game-item>.btn-main {
		background-color: transparent;
		cursor: pointer;
		font-size: 14px;
		height: 34px;
		padding: 9px 0;
		perspective: 300px;
		position: relative;
		text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
		transition: box-shadow .3s, transform .6s;
		width: 120px;
		z-index: 1;
	}

	.live-main-wrap>.game-item>.btn-main:before {
		background-color: #392e81;
		border-radius: 20px;
		content: "";
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		transition: transform .6s;
		width: 100%;
		z-index: -1;
	}


	.live-main-wrap>.game-item:hover>img {
		transform: scale3d(1.26, 1.26, 1);
	}

	.live-main-wrap>.game-item:after {
		background-color: rgba(255, 255, 255, 0);
		content: "";
		height: 100%;
		left: 0;
		position: absolute;
		top: 0;
		transform: scale3d(0, 0, 1);
		transition: .4s;
		width: 100%;
	}

	.live-main-wrap>.game-item:hover:after {
		background-color: rgba(255, 255, 255, .06);
		transform: scaleX(1);
		transition: .4s .2s;
	}

	.live-main-wrap>.game-item>.btn-main:hover {
		box-shadow: 0 10px 10px -5px rgba(0, 0, 0, .6);
		transform: scale3d(1.1, 1.1, 1);
		transition: box-shadow .4s .2s, transform .6s;
	}

	.live-main-wrap>.game-item>.btn-main:hover:before {
		transform: rotate3d(-1, 0, 0, 180deg);
	}
</style>